<template>
  <div class="fenlei contain">
    <!-- <h1>全部商品</h1> -->
    <el-row :gutter="20">
      <el-col :span="10">
        <Cascader ref="cascader" @query="query" />
      </el-col>
      <el-col :span="8"
        ><!-- <el-input
          placeholder="请输入关键词"
          prefix-icon="el-icon-search"
          v-model="keyWord"
          @blur="setKey"
          @change="changeKey"
        >
          <el-button
            @click="load"
            slot="append"
            icon="el-icon-search"
          ></el-button> </el-input
      > --><el-select
          v-model="sort"
          @change="changeSort"
          :placeholder="sort ? '按价格排序' : '按时间排序'"
        >
          <el-option label="按价格排序" :value="1"> </el-option>
          <el-option label="按时间排序" :value="0"> </el-option>
        </el-select>
      </el-col>
      <el-col :span="4"
        ><el-select
          v-model="value"
          @change="changeValue"
          :placeholder="value ? '升序' : '降序'"
        >
          <el-option label="升序" :value="1"> </el-option>
          <el-option label="降序" :value="-1"> </el-option>
        </el-select>
      </el-col>
    </el-row>
    <Goods
      @search="changeKey"
      :tableData="data"
      :finished="finished"
      :loading="loading"
    />
  </div>
</template>

<script>
import Cascader from "../../components/Cascader.vue";
import Goods from "../Cart/CartTable";
export default {
  name: "FenLei",
  data() {
    return {
      keyWord: "",
      data: [],
      finished: false,
      loading: true,
      pages: 0,
      category: "",
      sort: 0,
      value: 1,
    };
  },
  computed: {},
  watch: {},

  methods: {
    changeKey(x) {
      console.log(x,"输入");
      this.data = [];
      this.finished = false;
      this.keyWord = x;
      this.pages = 0;
      this.load();
    },
    changeSort() {
      this.finished = false;
      this.data = [];
      this.pages = 0;
      this.load();
    },
    changeValue() {
      this.data = [];
      this.finished = false;
      this.pages = 0;
      /* if (this.value == 1) {
        this.value = -1;
      } else {
        this.value = 1;
      } */
      this.load();
    },
    setKey() {
      if (this.keyWord) {
        this.pages = 0;
        this.data = [];
      }
    },
    load() {
      // console.log("load执行了");
      if (this.finished) {
        this.loading = false;
        return false;
      }

      let obj = {
        pages: this.pages,
        category: this.category,
        goodsName: this.keyWord,
        sort: this.sort,
        value: this.value,
      };
      // console.log(obj, "obj");
      this.axios
        .get("/api/v1/product", {
          params: obj,
          headers: {},
        })
        .then((res) => {
          this.loading = false;
          // console.log(res);
          this.data = [...this.data, ...res.data];
          if (res.data.length == 10) {
            this.pages++;
          } else {
            this.finished = true;
            this.loading = false;
          }
        });
    },
    query(x) {
      this.category = x[x.length - 1];
      this.pages = 0;
      this.finished = false;
      this.data = [];
      this.load();
    },
    getPro() {
      this.axios
        .get("/api/v1/product", {
          params: {
            pages: this.pages,
            category: this.category,
            goodsName: this.keyWord,
          },
        })
        .then((res) => {
          // console.log(res);
          this.pages++;
          this.data = res.data;
          this.newData = res.data;
        });
    },
  },
  created() {
    this.getPro();
    this.$nextTick(() => {
      let timer = null;
      window.onscroll = (e) => {
        clearTimeout(timer);
        timer = setTimeout(() => {
          // console.log(e);
          var st =
            document.documentElement.scrollTop || document.body.scrollTop;
          var ch = document.documentElement.clientHeight;
          let sh = document.documentElement.scrollHeight;
          // console.log(st, ch, sh);
          if (sh - st - ch < 50) {
            this.load();
          }
        }, 300);
      };
    });
  },
  mounted() {},
  components: { Cascader, Goods },
};
</script>
<style scoped>
.fenlei {
  margin: 15px auto;
}
.el-select {
  width: 100%;
}
</style>